Vue.component("list-view", {
    props: {
        spacing: {
            horizontal: {
                type: Number,
                default: 20
            },
            vertical: {
                type: Number,
                default: 20
            }
        },
        datas: Array,

        col: Number,
        size: Number,

        times: Number,
        loadSize: Number,
        img: {
            type: String,
            default: 'cover-img'
        }
    },
    template: `
        <transition-group name='list-view' tag='ul' mode="out-in" class='list-view' :style="{width: totalWidth + 'px', height: totalHeight + 'px'}">
            <li class='list-view-item'
            v-for='(data, index) of needRenderedDatas' :style='getStyle(index)' :key="data">
                
                <slot v-bind="getProps(data, index)">
                    <component :is="img" v-bind="getProps(data, index)" :key="data"></component>
                </slot>
            </li>
        </transition-group>
    `,
    data: function() {
        return {

        }
    },
    components: {
        
    },
    computed: {
        renderedIndex: function() {
            return Math.min(this.times * this.loadSize, this.datas.length);
        },
        needRenderedDatas: function() {
            return this.datas.slice(0, this.renderedIndex);
        },
        row: function() {
            return parseInt(this.renderedIndex / this.col) + !!(this.renderedIndex % this.col);
        },
        totalWidth: function() {
            return this.col * this.size + (this.col - 1) * this.spacing.horizontal;
        },
        totalHeight: function() {
            return this.row * this.size + (this.row - 1) * this.spacing.vertical;
        }

    },
    methods: {
        getStyle: function(index) {
            var pos = this.getPosition(index);
            return {
                position: 'absolute',
                width: this.size + 'px',
                height: this.size + 'px',
                top: pos.top + 'px',
                left: pos.left + 'px'
            };
        },
        getPosition: function(index) {
            var y = parseInt(index / this.col),
                x = parseInt(index % this.col),
                size = this.size;
            return {
                x, y,
                top: y * (size +  this.spacing.vertical),
                left: x * (size + this.spacing.horizontal)
            }
        },
        getProps: function(data, index) {
            return {
                src: data,
                index: index,
                width: this.size,
                height: this.size
            }
        }
    },
    created: function() {
        // this.more();
    }
});
